<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>multi_pic_slider</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 630px;
            height: 170px;
            border: 1px solid #e74f4d;
            margin: 30px auto;
            position: relative;
            overflow: hidden;
        }

        #multi_pic{
            list-style: none;
            position: absolute;
            left: 0;
        }
        #multi_pic li{
            width: 150px;
            height: 150px;
            margin-right: 10px;
            float: left;
            text-align: center;
            color: #e74f4d;
        }
    </style>
</head>
<body>
    <h3>多图片无缝轮换，可以控制轮换的图片个数</h3>
    <div class="container">
        <ul id="multi_pic">
            <li><img src="img/1.jpg" alt=""><span>1.jpg</span></li>
            <li><img src="img/2.jpg" alt=""><span>2.jpg</span></li>
            <li><img src="img/3.jpg" alt=""><span>3.jpg</span></li>
            <li><img src="img/4.jpg" alt=""><span>4.jpg</span></li>
            <li><img src="img/5.jpg" alt=""><span>5.jpg</span></li>
        </ul>
    </div>

    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script>
        window.onload = function () {
            var ul = document.getElementById('multi_pic');
            var li_list = ul.getElementsByTagName('li');

            //设置uL容器的宽度
            var width = li_list[0].offsetWidth + 10;
            function setULwidth() {
                ul.style.width = li_list.length * width + 'px';
            }
            setULwidth();

            //定时轮播图片
            setInterval(change, 3000);
            var sliderNum = 2;
            function change() {
                //复制当前显示的节点到末尾
                for(var i = 0; i < sliderNum; i++){
                    var tempLi = li_list[i].cloneNode(true);
                    ul.appendChild(tempLi);
                    setULwidth();
                }

                //移动后，回调函数删除前面的节点
                $('#multi_pic').animate({left:-(width * sliderNum) +'px'}, function () {
                    for(var j = 0; j < sliderNum; j++){
                        ul.removeChild(li_list[0]);
                    }
                    ul.style.left = 0;
                });

            }
        }
    </script>
</body>
</html>